<template>
  <div class="warning-info">
    <div class="title">预警信息</div>
    <div>
      <el-table :data="alertData"
                :header-cell-style="{background:'#DFE1E6',color:'#1A1919'}"
                :cell-style="{color:'#707070'}"
                max-height="270px"
                empty-text="暂无预警">
        <!--<el-table-column label="设备编号" prop="deviceId"></el-table-column>-->
        <el-table-column label="设备名称" prop="name"></el-table-column>
        <el-table-column :label="`温度-${alertNum.TEMPERATURE}台`">
          <template scope="{row}">
            <span :class="row.data.TEMPERATURE.evaluate.alert?'warning-color':''">{{row.data.TEMPERATURE.val.toFixed(1)}}</span>
          </template>
        </el-table-column>
        <el-table-column :label="`湿度-${alertNum.HUMIDITY}台`">
          <template scope="{row}">
            <span :class="row.data.HUMIDITY.evaluate.alert?'warning-color':''">{{row.data.HUMIDITY.val.toFixed(0)}}</span>
          </template>
        </el-table-column>
        <el-table-column :label="`CO₂-${alertNum.CO2}台`">
          <template scope="{row}">
            <span :class="row.data.CO2.evaluate.alert?'warning-color':''">{{row.data.CO2.val}}</span>
          </template>
        </el-table-column>
        <el-table-column :label="`PM2.5-${alertNum.PM25}台`">
          <template scope="{row}">
            <span :class="row.data.PM25.evaluate.alert?'warning-color':''">{{row.data.PM25.val}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getAlertNum } from "@/api/platformManage";
export default {
  name: "warningInfo",
  props: {
    alertData: {
      type: Array,
      default: []
    },
    platformId: String
  },
  data() {
    return {
      alertNum: {
        TEMPERATURE:0,
        HUMIDITY:0,
        CO2:0,
        PM25:0
      }
    };
  },
  watch: {
    platformId() {
      this.getAlertNumFun();
    }
  },
  mounted() {
  },
  methods: {
    //获取平台预警数量
    getAlertNumFun() {
      getAlertNum(this.platformId).then(res => {
        this.alertNum = res.value;

      });
    }
  }
};
</script>
<style lang="scss" scoped>
.warning-info {
  background-color: #fff;
  height: 323px;
  width: 100%;
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;

  .warning-color {
    color: #ff512d;
  }
  .title {
    font-size: 16px;
    font-weight: bold;
    line-height: 21px;
    color: #0a0a0a;
  }
}
</style>
